<template>
  <div class="full-container">
    <div class="edit-container">
      <div class="settings">
        <div class="left-setting">
          <label style="margin-right:10px;">客户分类</label>
          <b-select
            placeholder="客户分类"
            expanded
            v-model="currentCustomerType">
            <option v-for="item in customerTypeList" :key="item.id" :value="item.id">{{item.name}}</option>
          </b-select>
          <label style="margin-right:10px;">是否黑名单</label>
          <b-select
            placeholder="是否黑名单"
            expanded
            v-model="isBlack">
            <option v-for="item in blackTypeList" :key="item.name" :value="item.value">{{item.name}}</option>
          </b-select>
          <b-input class="form-item" placeholder="请输入关键词" v-model="currentKeyword"/>
          <a class="button is-info" @click="customerFilter">过滤客户</a>
        </div>
        <div class="right-setting">
          <a class="button is-info" @click="isCustomerTypeActive=true">客户分类管理</a>
          <a class="button is-info" @click="createCustomer">新建客户</a>
            <!-- <a class="button is-info">批量导入客户</a> -->
        </div>
      </div>
      <div class="customer-table">
        <b-table
            :data="customerList"
            class="customer-table"
            :striped="true"
            :narrowed="true"
            :paginated="true"
            :per-page="15">
            <template slot-scope="props">
              <b-table-column field="id" label="序号" width="50" numeric>
                {{ props.row.id }}
              </b-table-column>
              <b-table-column field="domain" label="域名">
                {{ props.row.domain }}
              </b-table-column>
              <b-table-column field="email" label="邮箱" email>
                {{ props.row.email }}
              </b-table-column>
              <b-table-column field="phone" label="手机号">
                {{props.row.phone}}
              </b-table-column>
              <b-table-column field="websiteDescription" label="网站标题">
                {{props.row.websiteTitle}}
              </b-table-column>
              <b-table-column field="websiteDescription" label="网站描述">
                {{props.row.websiteDescription}}
              </b-table-column>
              <b-table-column label="编辑">
                <a class="button is-info" @click="editCustomer(props.index)">编辑</a>
              </b-table-column>
              <b-table-column label="黑名单">
                <a class="button is-warning" @click="addBlackList(props.row.id)" v-if="!props.row.black">拉入黑名单</a>
                <a class="button is-info" @click="removeOutBlackList(props.row.id)" v-if="props.row.black">移出黑名单</a>
              </b-table-column>
              <b-table-column label="删除">
                <a class="button is-danger" @click="confirmCustomDelete(props.row.id)">删除</a>
              </b-table-column>
            </template>
          </b-table>
      </div>
    </div>
    <!-- 客户分类模态框 -->
    <b-modal :active.sync="isCustomerTypeActive" :width="640"  scroll="keep">
      <div class="edit-container">
        <div class="settings">
          <a class="button is-info" @click="isNewCustomerTypeActive = true">新增客户分类</a>
        </div>
        <div class="customer-table ">
          <b-table
            :data="customerTypeList"
            class="customer-table"
            :striped="true"
            :narrowed="true"
            :paginated="true"
            :per-page="15">
            <template slot-scope="props">
              <b-table-column field="id" label="序号" width="50" numeric>
                {{ props.row.id }}
              </b-table-column>
              <b-table-column field="name" label="分类名">
                {{ props.row.name }}
              </b-table-column>
              <b-table-column field="type" label="类型" >
                {{ props.row.type }}
              </b-table-column>
              <b-table-column field="createdAt" label="创建时间">
                {{props.row.createdAt}}
              </b-table-column>
              <b-table-column field="websiteDescription" label="编辑">
                <a @click="updateCustomerTypeInfo(props.row.id)">编辑</a>
              </b-table-column>
              <b-table-column field="websiteDescription" label="删除">
                <a class="is-danger" @click="deleteCustomerType(props.row.id)">删除</a>
              </b-table-column>
            </template>
          </b-table>
        </div>
      </div>
    </b-modal>
    <!-- 新建单个客户模态框 -->
    <b-modal :active.sync="isCardModalActive" :width="640" scroll="keep">
      <div class="card">
          <div class="card-content">
            <b-field label="客户类型">
              <b-select
                placeholder="客户分类"
                expanded
                v-model="newCustomerInfo.typeId">
                <option v-for="item in customerTypeList" :key="item.id" :value="item.id">{{item.name}}</option>
              </b-select>
            </b-field>
            <b-field label="域名">
                <b-input v-model="newCustomerInfo.domain"></b-input>
            </b-field>
            <b-field label="邮箱">
                <b-input v-model="newCustomerInfo.email"></b-input>
            </b-field>
            <b-field label="电话">
                <b-input v-model="newCustomerInfo.phone"></b-input>
            </b-field>
            <b-field label="网站标题">
                <b-input v-model="newCustomerInfo.websiteTitle"></b-input>
            </b-field>
            <b-field label="网站简介">
                <b-input v-model="newCustomerInfo.websiteDescription"></b-input>
            </b-field>
            <!-- <b-field label="FACEBOOK">
                <b-input ></b-input>
            </b-field>
            <b-field label="LINKEDIN">
                <b-input></b-input>
            </b-field> -->
            <div class="card-button">
              <a class="button is-info" @click="submitCustomerInfo">新增客户</a>
            </div>
          </div>
      </div>
  </b-modal>
    <!-- 编辑客户模态框 -->
    <b-modal :active.sync="isEditCustomerActive" :width="640" scroll="keep">
      <div class="card">
          <div class="card-content">
            <b-field label="客户类型">
              <b-select
                placeholder="客户分类"
                expanded
                v-model="currentEditCustomer.typeId">
                <option v-for="item in customerTypeList" :key="item.id" :value="item.id">{{item.name}}</option>
              </b-select>
            </b-field>
            <b-field label="域名">
                <b-input v-model="currentEditCustomer.domain"></b-input>
            </b-field>
            <b-field label="邮箱">
                <b-input v-model="currentEditCustomer.email"></b-input>
            </b-field>
            <b-field label="电话">
                <b-input v-model="currentEditCustomer.phone"></b-input>
            </b-field>
            <b-field label="网站标题">
                <b-input v-model="currentEditCustomer.websiteTitle"></b-input>
            </b-field>
            <b-field label="网站简介">
                <b-input v-model="currentEditCustomer.websiteDescription"></b-input>
            </b-field>
            <div class="card-button">
              <a class="button is-info" @click="confirmCustomerEdit">确认修改</a>
            </div>
          </div>
      </div>
  </b-modal>
    <!-- 新增用户分类模态框 -->
    <b-modal :active.sync="isNewCustomerTypeActive" :width="640" scroll="keep">
      <div class="card">
        <div class="card-content">
          <b-field label="分类名">
            <b-input v-model="newCustomerType.name"></b-input>
          </b-field>
          <b-field label="分类描述">
            <b-input v-model="newCustomerType.description"></b-input>
          </b-field>
          <div class="card-button">
            <a class="button is-info" @click="createNewCustomerType">新增分类</a>
          </div>
        </div>
      </div>
    </b-modal>
    <!-- 编辑用户分类模态框 -->
    <b-modal :active.sync="isEditCustomerTypeActive" :width="640" scroll="keep">
      <div class="card">
        <div class="card-content">
          <b-field label="分类名">
            <b-input v-model="editCustomerTypeInfo.name"></b-input>
          </b-field>
          <b-field label="分类描述">
            <b-input v-model="editCustomerTypeInfo.description"></b-input>
          </b-field>
          <div class="card-button">
            <a class="button is-info" @click="editNewCustomerType()">确定修改</a>
          </div>
        </div>
      </div>
    </b-modal>
  <!-- loading状态 -->
      <b-loading :is-full-page="isFullPage" :active.sync="isLoading" :can-cancel="false"></b-loading>
  </div>

</template>

<script>
import { getUserId } from "@/util/userInfoStorage"
import { getCustomerTypeByUserId, createCustomerType, updateCustomerType, deleteCustomerTypeById } from "@/api/customerType"
import { getCustomerByUserIdAndTypeId, createNewCustomer, addToBlackList,removeFromBlackList, deleteCustomer, updateCustomerInfo} from "@/api/customer"
export default {
  name: "customer-list",
  watch: {
    currentCustomerType: function(newVal) {
      this.customerFilter();
    },
    isBlack: function(newVal) {
      this.customerFilter();
    },

  },
  methods: {
    //showToast方法
    showToast(message,type){
      this.$toast.open({
        message: message || '未知错误',
        type: type,
      })
    },
    //提交客户信息修改
    confirmCustomerEdit(){
      if(!this.currentEditCustomer.email){
        this.showToast('客户邮箱不能为空','is-danger');
        return;
      }else if(!this.currentEditCustomer.typeId){
        this.showToast('请选择客户类型','is-danger');
        return;
      }
      this.isLoading = true;
      updateCustomerInfo(this.userid,this.currentEditCustomer.id,this.currentEditCustomer).then((res) => {
        this.$toast.open({
          message: '更新用户信息成功',
          type: 'is-success'
        })
        this.isLoading = false;
        this.customerFilter();
        this.isEditCustomerActive = false;
      }).then(e => {
        this.isLoading = false;
        this.showToast(e.message,'is-danger');
      })
    },
    //编辑客户信息
    editCustomer(index){
      this.isEditCustomerActive = true;
      let currentCustomer = this.customerList[index];
      let currentEditCustomer = {
        typeId: currentCustomer.customerType.id,
        id: currentCustomer.id,
        domain: currentCustomer.domain,
        email: currentCustomer.email,
        websiteDescription: currentCustomer.websiteDescription,
        websiteTitle: currentCustomer.websiteTitle,
        phone: currentCustomer.phone,
      };
      this.currentEditCustomer = currentEditCustomer;
    },
    //根据类型&关键词过滤客户
    customerFilter(){
      let filterInfo = {
        keyword: this.currentKeyword,
        typeId: this.currentCustomerType,
        isBlack:this.isBlack,
        page: 0,
        size: 20
      };
      this.isLoading = true;
      getCustomerByUserIdAndTypeId(this.userid,filterInfo).then((res) =>{
        this.customerList = res.data.content;
        this.isLoading = false;
      }).catch((e) => {
        this.isLoading = false;
        this.showToast(e.message,'is-danger');
      })
    },
    //删除客户
    confirmCustomDelete(customerId){
      this.$dialog.confirm({
          title: '删除客户',
          message: '确定要 <b>删除</b> 此客户? 数据删除后不可回复',
          confirmText: '确定删除',
          cancelText: '取消',
          type: 'is-danger',
          hasIcon: false,
          onConfirm: () => {
            this.isLoading = true;
            deleteCustomer(this.userid,customerId).then((res)=>{
              this.showToast('删除成功','is-success');
              // this.$toast.open({
              //     message: '删除成功',
              //     type: 'is-success'
              // });
              this.isLoading = false;
              this.getCustomerListByTypeKeyword("","",0,20);
            }).catch((e) => {
              this.isLoading = false;
              this.showToast(e.message,'is-danger');
              // this.$toast.open({
              //     message: e.message,
              //     type: 'is-danger'
              // })
            });
          }
      })
    },
    //添加到黑名单
    addBlackList(customerId){
      this.isLoading = true;
      addToBlackList(this.userid,customerId).then((res) => {
        this.$toast.open({
          message: "添加到黑名单成功",
          type: "is-success"
        })
        this.isLoading = false;
        this.getCustomerListByTypeKeyword("","",0,20);
      }).catch((e) => {
        this.isLoading = false;
        this.showToast(e.message,'is-danger');
      })
    },
    //移出黑名单
    removeOutBlackList(customerId) {
      this.isLoading = true;
      removeFromBlackList(this.userid,customerId).then(res => {
        this.$toast.open({
          message: '移出黑名单成功',
          type: 'is-success'
        })
        this.isLoading = false;
        this.customerFilter();
      }).catch(e => {
        this.isLoading = false;
        this.$toast.open({
          message: e.message || '未知错误',
          type: 'is-danger'
        })
      })
    },
    //获取全部客户类型
    getCustomerTypeList(){
      this.isLoading = true;
      getCustomerTypeByUserId(this.userid).then((res) => {
        this.customerTypeList = res.data;
        this.currentCustomerType
        this.isLoading = false;
      }).catch((e) => {
        this.isLoading = false;
        this.showToast(e.message,'is-danger');
      })
    },
    //获取指定类型，指定关键字，指定页数的客户信息
    getCustomerListByTypeKeyword(typeId, keyword,isBlack, page, size){
      let searchInfo = {
        typeId: typeId,
        keyword: keyword,
        isBlack:isBlack,
        page: page,
        size: size
      };
      this.isLoading = true;
      getCustomerByUserIdAndTypeId(this.userid,searchInfo).then((res) => {
        this.customerList = res.data.content;
        this.isLoading = false;
      }).catch(e => {
        this.isLoading = false;
        this.showToast(e.message,'is-danger');
      })
    },
    // handleClick(row) {
    //   console.log(row);
    // },
    createCustomer() {
      this.isCardModalActive = true;
    },
    submitCustomerInfo(){
      //创建新客户
      if(!this.newCustomerInfo.typeId){
        this.showToast('请选择客户类型','is-danger');
        return;
      }else if(!this.newCustomerInfo.email){
        this.showToast('请填写客户邮箱','is-danger');
        return;
      }
      this.isLoading = true;
      createNewCustomer(this.userid,this.newCustomerInfo).then((res) => {
        this.customerFilter();
        this.clearCreateCustomerForm();
        this.isCardModalActive = false;
        this.isLoading = false;
      }).catch(e => {
        this.isLoading = false;
        this.showToast(e.message,'is-danger');
      })
    },
    clearCreateCustomerForm() {
      this.newCustomerInfo = {
        domain: '',
        email: '',
        phone: '',
        websiteTitle: '',
        websiteDescription: '',
        typeId: 0,
      }
    },
    deleteCustomerType(typeId){
      this.$dialog.confirm({
        title: '删除客户分类',
        message: '确定要 <b>删除</b> 此客户分类? 数据删除后不可回复',
        confirmText: '确定删除',
        cancelText: '取消',
        type: 'is-danger',
        hasIcon: false,
        onConfirm: () => {
          this.isLoading = true;
          deleteCustomerTypeById(this.userid,typeId).then((res)=>{
            this.$toast.open({
              message: '删除成功',
              type: 'is-success'
            });
            this.isLoading = false;
            this.getCustomerTypeList();
          }).catch((e) => {
            this.isLoading = false;
            this.$toast.open({
              message: e.message,
              type: 'is-danger'
            })
          });
        }
      })
    },
    //提交信息编辑结果
    editNewCustomerType(){
      this.isLoading = true;
      updateCustomerType(this.userid,this.currentEditTypeId,this.editCustomerTypeInfo).then((res) => {
        this.$toast.open({
          message: '分类信息修改成功',
          type: 'is-success',
        })
        this.isLoading = false;
        this.getCustomerTypeList();
        this.isEditCustomerTypeActive = false;
      }).catch(e => {
        this.isLoading = false;
        this.$toast.open({
          message: e.message || '服务器未知错误',
          type: 'is-danger'
        })
      })
    },
    //编辑客户分类信息
    updateCustomerTypeInfo(typeId){
      this.currentEditTypeId = typeId;
      this.isEditCustomerTypeActive = true;
      for(let item of this.customerTypeList){
        if(item.id == typeId){
          this.editCustomerTypeInfo.name = item.name;
          this.editCustomerTypeInfo.description = item.description;
          break;
        }
      }
    },
    //新增客户分类
    createNewCustomerType(){
      if(!this.newCustomerType.name){
        this.$toast.open({
          message: '请填写分类名',
          type: 'is-type'
        })
        return;
      }
      this.isLoading = true;
      createCustomerType(this.userid,this.newCustomerType).then((res) => {
        this.$toast.open({
          message: '创建新分类成功',
          type: 'is-success'
        })
        this.isLoading = false;
        this.getCustomerTypeList();
        this.clearNewCustomerForm();
        this.isNewCustomerTypeActive = false;
      }).catch(e => {
        this.isLoading = false;
        this.$toast.open({
          message: e.message || '服务器未知错误',
          type: 'is-danger',
        })
      })
    },
    clearNewCustomerForm() {
      this.newCustomerType.name = '';
      this.newCustomerType.description = '';
    },
  },
  mounted() {
    let userid = getUserId();
    this.userid = userid;
    //获取全部客户类型
    this.getCustomerTypeList();
    //获取客户列表信息
    this.getCustomerListByTypeKeyword("","",this.isBlack,0,20);
  },
  data() {
    return {
      userid: 0,
      customerTypeList: [],
      customerList: [],
      blackTypeList:[
        {
          name:'白名单',
          value:false,
        },
        {
          name:'黑名单',
          value:true,
        },
      ],
      isBlack:false,
      newCustomerType: {
        name: '',
        description: '',
      },
      editCustomerTypeInfo: {
        name: '',
        description: ''
      },
      newCustomerInfo: {
        domain: '',
        email: '',
        phone: '',
        websiteTitle: '',
        websiteDescription: '',
        typeId: 0,
      },
      currentKeyword: '',
      currentNewCustomerTypeId: 0,
      currentCustomerType: 0,
      isCardModalActive: false,
      isEditCustomerActive: false,
      isCustomerTypeActive:false,
      isNewCustomerTypeActive:false,
      isEditCustomerTypeActive:false,
      currentEditCustomer: {},
      isFullPage: true,
      isLoading: false,
    }
  }
}
</script>

<style lang="less" scoped>
.edit-container {
  margin: 30px 20px;
  padding: 40px 40px;
  height: 80vh;
  background-color: #ffffff;
  .settings {
    display: flex;
    justify-content: space-between;
    .left-setting {
      display: flex;
      align-items: center;
      .form-item {
        margin-left: 10px;
        margin-right: 10px;
      }
    }
    .right-setting {
      display: flex;
      .button {
        margin-right: 10px;
      }
    }
  }
  .customer-table {
    margin-top: 30px;
  }
}
</style>
